<template>
  <div :class="ns.b()">
    <div class="content-wrapper" v-spin="loading">
      <div class="container" v-if="showTable">
        <div class="name">
          <span class="bondName">{{ data.projectName }}</span>
        </div>
        <div>
          <vc-clamp-toggle maxLines="3" :text="data.projectIntroduction"
                           :toggleText="['展开', '收起']"/>
        </div>
        <div class="section">
          <div class="title">项目基本信息</div>
          <descriptions :item="data"
                        :infos="infos"/>
        </div>
        <div class="section">
          <div class="title">项目产业类别规划</div>
          <descriptions :item="data"
                        :infos="infos2"/>
        </div>
        <div class="section" v-if="
          data.greenProjectPerformances &&
          data.greenProjectPerformances.length > 0
        ">
          <div class="title">项目减排效益</div>
          <descriptions :item="data"
                        :infos="infos3"/>
        </div>
        <div class="section section4">
          <div class="title">项目相关债券</div>
          <div
            class="detailItem"
            v-if="data.greenProjectBonds && data.greenProjectBonds.length > 0"
          >
            <div class="investmentList">
              <div
                class="investmentListItem"
                v-for="(item, index) in greenProjectBondshow"
                :key="index"
                @click="toBondDetail(item.greenBondInformationId)"
              >
                <div class="top">
                  <div class="name">
                    <span class="bondName">{{ item.bondShortName || "-" }}</span>
                    <span
                      class="label"
                      v-for="(litem, lindex) in item.labels"
                      :key="lindex"
                      :style="{ background: litem.bgColor, color: litem.color }"
                    >{{ litem.name }}</span
                    >
                    <span class="label outdate" v-if="item.expired">已到期</span>
                  </div>
                </div>
                <div class="bottom">
                  <div class="bottomList">
                    <div class="label">发行规模</div>
                    <div class="value">
                      {{ item.issuingScale ? item.issuingScale + "亿" : "-" }}
                    </div>
                  </div>
                  <div class="bottomList">
                    <div class="label">发行起始日</div>
                    <div class="value">{{ item.issuingDate || "-" }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="w-full text-center mt-10px">
              <el-button size="small"
                         v-if="data.greenProjectBonds && data.greenProjectBonds.length > 2"
                         @click="isOpenMoreInvestments = !isOpenMoreInvestments">
                {{ isOpenMoreInvestments ? '收缩' : '展开更多' }}
                <vc-icon icon="vi-arrow-down" color="#1382EF"
                         :class="[isOpenMoreInvestments ? 'rotate-180' : '']"/>
              </el-button>
            </div>
          </div>
        </div>
      </div>
      <vc-nodata v-if="error" :type="104"/>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {useNamespace} from "vc/src/use";
import {getGreenProjectdDetail} from "@/views/modules/greenBond/apis";
import {useTable} from './useTable';
import Descriptions from '../components/descriptions.vue';
import {toBondDetail} from '@/utils/router'

const isOpenMoreInvestments = ref(false);
const ns = /* hoist-static*/ useNamespace('green-project-detail');
defineOptions({name: ns.b()});
const route = useRoute();
const id: any = route.params.id;
const {infos, infos2, infos3} = useTable()
const showTable = ref(false);
let greenProjectBondshow = $ref();


const {data, loading, error} = useRequest(getGreenProjectdDetail, {
  defaultParams: [{id}],
  onSuccess(res) {
    showTable.value = true
    setTimeout(() => {
      //处理相关债券
      if (
        res.greenProjectBonds &&
        res.greenProjectBonds.length > 2
      ) {
        greenProjectBondshow = res.greenProjectBonds.slice(0, 2);
      } else {
        greenProjectBondshow = res.greenProjectBonds;
      }
    }, 500)
  }
})
watch(isOpenMoreInvestments, (newValue) => {
  if (newValue) {
    greenProjectBondshow = data.value.greenProjectBonds;
  } else {
    greenProjectBondshow = data.value.greenProjectBonds.slice(0, 2);
  }
})

</script>
<style lang="scss" scoped>
:deep(.vc-nodata__img) {
  margin-top: 260px !important;
  width: 183px !important;
  height: 128px !important;
}

:deep(.label-tag) {
  display: inline-block;
  box-sizing: border-box;
  border-radius: 2px;
  padding: 1px 7px;
  line-height: 14px;
  color: #5C84D2;
  position: relative;
  border: 1px solid #5C84D2;
  margin-left: 16px;
}

:deep(.vc-descriptions__cell) {
  font-size: 13px !important;
  border: 1px solid #F6F6F6;
  border-radius: 4px !important;
}

.vc-green-project-detail {
  background: #eaeaea;
  height: 100%;

  .content-wrapper {
    background: #eaeaea;

  }

  .container {
    margin: 0 auto;
    width: 1000px;
    background: white;
    padding: 14px 24px;
    height: 100%;

    .name {
      margin-bottom: 10px;

      .bondName {
        color: #111111;
        font-weight: 600;
      }

      .label {
        color: #ffffff;
        font-size: 12px;
        padding: 2px 8px;
        border-radius: 2px;
        margin-left: 5px;
        white-space: nowrap;
        display: inline-block;
        margin-bottom: 4px;
        line-height: 14px;

        &.green {
          background-color: #35CACA;
        }

        &.outdate {
          background-color: #FB9196;

        }
      }
    }

    .section {
      margin-top: 20px;

      .title {
        font-weight: bold;
        color: #000000;
        position: relative;
        padding-left: 16px;
        margin-bottom: 10px;

        &::before {
          content: "";
          position: absolute;
          width: 4px;
          height: 18px;
          left: -1px;
          top: 2px;
          background: #15b4f1;
        }
      }
    }


    .section4 {
      .investmentList {
        padding-bottom: 15px;

        .investmentListItem {
          border-bottom: 1px solid #fafafa;
          padding-bottom: 10px;
          margin-top: 12px;

          &:last-child {
            border-bottom: 0;
          }

          .top {
            position: relative;

            &::after {
              content: '';
              background-image: url(../../../../assets/right.png);
              background-size: 100% 100%;
              background-repeat: no-repeat;
              width: 6px;
              height: 11px;
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              right: 0;
            }

            .name {
              padding-right: 20px;

              .bondName {
                font-weight: 600;
                color: #111111;
                cursor: pointer;
              }

              .label {
                color: #ffffff;
                font-size: 12px;
                padding: 2px 8px;
                border-radius: 2px;
                margin-left: 5px;
                white-space: nowrap;
                display: inline-block;
                margin-bottom: 4px;
                line-height: 14px;

                &.green {
                  background-color: #35CACA;
                }

                &.outdate {
                  background-color: #FB9196;

                }
              }
            }
          }

          .bottom {
            display: flex;
            margin-top: 10px;

            .bottomList {
              display: flex;
              align-items: center;
              margin-right: 40px;
              line-height: 21px;

              .label {
                color: #8B8C8C;
                flex-shrink: 0;
                width: 90px;

                &.left {
                  width: 110px;
                }

                &.right {
                  width: 110px;
                }
              }

              .value {
                color: #111111;
              }
            }
          }
        }
      }
    }
  }
}
</style>
